<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>flex</title>

  <style>
    body {margin-left: 1rem; }

    /*主例子*/
    #div_parent {
      height: 400px;border: 2px solid #f00;font: 24px jokerman;
      display: flex;
      /*1.主轴方向x轴*/
      /*flex-direction: row;            !*起点左侧*!*/
      /*flex-direction: row-reverse;    !*起点右侧*!*/
      /*!*主轴方向y轴*!*/
      /*flex-direction: column;         !*起点上*!*/
      /*flex-direction: column-reverse; !*起点下*!*/
      /*2.项目是否换行*/
      /*flex-wrap: nowrap;      !*不换行*!*/
      flex-wrap: wrap;
      /*换行*/
      /*flex-wrap: wrap-reverse;!*换行反转*!*/
      /*3.简写*/
      /*flex-flow: row-reverse wrap;*/
      /*4.项目在主轴上的排列方式	*/
      justify-content: space-around;
      /*5.项目在交叉轴上的对齐方式*/
      /*align-items: flex-end;*/
    }

    #d1,#d2, #d3 { width: 200px; height: 200px;}

    #d1 {
      background: #ff0;
      order: 1;
      /*放大*/
      /*flex-grow: 1;*/
      /*缩小*/
      /*flex-shrink: 1;*/
      /*单独定义当前项目 在交叉轴的对齐方式*/
      align-self: flex-end;
    }

    #d2 {
      background: #0ff;
      order: 2;
      flex-grow: 10;
      /*flex-shrink: 10;*/
      align-self: center;
    }

    #d3 {
      background: #ff00ff;
      order: 3;
      /*flex-grow: 100;*/
      /*flex-shrink: 100;*/
      align-self: flex-start;
      /*align-self: stretch;*/
    }

    ul {
      width: 1004px;height: 82px;background-color: #666666;
      padding: 20px 0;list-style: none;
      display: flex;
      justify-content: space-around;
      /*flex-direction: row;*/
      /*flex-wrap: nowrap;*/
    }
  </style>
</head>

<body>
  <p>弹性布局 display:flex</p>
  <ul>
    <li><img src="img/icon1.png"><p>品质保障</p></li>
    <li><img src="img/icon2.png"><p>私人订制</p></li>
    <li><img src="img/icon3.png"><p>专属特权</p></li>
    <li><img src="img/icon4.png"><p>学员特供</p></li>
  </ul>


  <p>5.项目的属性</p>

  <div id="div_parent">
    <div id="d1">11</div>
    <div id="d2">22</div>
    <div id="d3">33</div>
  </div>



  <br><br><br><br><br><br><br><br><br>
</body>

</html>